<template>
    <div class="share">
        <LoginHeader>
        <i class="el-icon-arrow-left" slot="i" @click="goback"></i>
        <span slot="title"></span>
        <span slot="more"></span>
        </LoginHeader>
        <div class="sharehead">
            <img src="@/assets/njrpic/userheaderpic.png" alt="">
            <p>{{this.$store.state.username}}</p>
            <div class="coinitem">
                <img src="@/assets/njrpic/coin.png" alt="">
                <span>{{this.$store.state.coin}}</span>
            </div>
              <p >91 <span>分</span></p>
              <div class="sushiparterner"> 
                  <img src="@/assets/njrpic/firstpic/ic_share_calendar.png" alt="">
              <p>
                  素士陪伴第{{parttime}}天
              </p>
              </div>
              <img src="@/assets/njrpic/firstpic/whiteteeth.png" alt="">
        </div>
        <div class="list" v-for="(item,index) in listdata" :key="index">
            <div>
                <p>{{item.title}}</p>
                <p>{{item.word}}</p>
            </div>
            <span>{{item.percentage}}</span>
        </div>
        <div class="sharebot">
              <img src="@/assets/njrpic/firstpic/ic_launcher.png" alt="">
            <div>
              <img src="@/assets/njrpic/firstpic/ic_share_logo.png" alt="">
                <span>X3声波电动牙刷</span>
                <p>智能声波牙刷专研者</p>
            </div>
              <img src="@/assets/njrpic/firstpic/ic_share_code.png" alt="">
        </div>
        <div class="hardfixed" v-if="show1" id="item-nav" v-show="show2">
              <img src="@/assets/njrpic/firstpic/ic_share_top.png" alt="">
        </div>
        <div class="changehardfixed" v-show="show2" v-else >
              <img src="@/assets/njrpic/firstpic/ic_share_wechat.png" alt="">
              <img src="@/assets/njrpic/firstpic/ic_share_frinds.png" alt="">
              <img src="@/assets/njrpic/firstpic/ic_share_weibo.png" alt="">
        </div>
    </div>
</template>
<script>
import LoginHeader from '@/components/njrcomponents/login_header.vue'
export default {
    data(){
        return{
            show1:true,
            show2:false,
            parttime:'',
            listdata:[
                {title:'牙齿清洁度比上次提升',word:'温柔微笑可撩妹',percentage:'17%'},
                {title:'清洁度不足区域',word:'小心蛀牙~',percentage:'67%'},
                {title:'牙菌斑清洁度',word:'洁癖达人',percentage:'74%'}
            ]
        }
    },
    mounted() {
        let time=new Date()
//    console.log(time.getTime());
let nowtime=time.getTime()
   window.addEventListener("scroll", this.setNavPosition);
   this.$http.get('/api/users/'+this.$store.state.username)
   .then(({
       data,config
   })=>{
       if(data.code==200){
           var days    = (nowtime-data.data.createtime) / 1000 / 60 / 60 / 24;
           var daysRound = Math.floor(days)+1;
           this.parttime=daysRound
       }else{
           this.$message.error('查询数据失败')
       }
   })
   
},
beforeDestroy() {
   //离开该页面需要移除这个监听的事件
   window.removeEventListener("scroll", this.setNavPosition);
},
    components:{
        LoginHeader
    },
     methods:{
        goback(){
            this.$router.go(-1)
        },
         setNavPosition() {
    var scroll_height =window.pageYOffset;
    if (scroll_height >50) {
        this.show2=true
        if(scroll_height >160){
        this.show1=false
        }
        if(scroll_height < 100) {
        this.show1=true
    }
    }else if(scroll_height <50){
        this.show2=false
    }
  }
    }
}
</script>
<style lang="less" scoped>
.share{
    background-color: #5047d6;
    .sharehead{
        text-align: center;
        >img{
            border-radius: 50%;
        }
        img+p{
            color: white;
        }
        img+span{
            color: #fdd44d;
        }
        .coinitem{
            display: flex;
            align-items: center;
            justify-content: center;
            img{
            border-radius: 50%;
        }
        }
        .coinitem+p{
            color: white;
            font-size: 70px;
            span{
                font-size: 15px;
            }
        }
        p{
            margin: 15px 0;
        }
        .sushiparterner{
            display: flex;
            align-items: center;
            justify-content: center;
            img{
                width: 5%;
                margin-right: 10px;
            }
        }
        
    }
    .list{
            display: flex;
    justify-content: space-between;
    margin: 0 10%;
    padding: 25px 10px;
    border-top: 1px solid #6e6acd;
    border-bottom: 1px solid #6e6acd;
    color: white;
    span{
        font-size: 50px;
        align-items: center;
    }
    p:last-of-type{
        margin-top: 10px;
        color: #7e78dc;
    }
        }
        .sharebot{
            display: flex;
            background-color: white;
            padding: 20px 70px 50px;
            align-items: center;
            img{
                width: 20%;
            }
            div{
                border-left: 1px solid #f8f8f8;
                padding: 20px 25px;
                margin-left: 10px;
                img{
                    width: 30%;
                }
            }
            p{
                color: #cecece;
            }
        }
        .hardfixed{
            position: fixed;
            bottom: 185px;
            right: -100px;
            img{
                width: 35%;
            }
        }
        .changehardfixed{
            position: fixed;
            display: flex;
            justify-content: space-evenly;
            bottom: 195px;
            right: 0px;
            img{
                width: 10%;
            }
        }
}
</style>